<template>
  <div>
    <div class="conlist">
      <van-nav-bar title="学习" class="nav" />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item> <img src="https://picsum.photos/430/130" alt=""></van-swipe-item>
        <van-swipe-item> <img src="https://picsum.photos/430/130" alt=""></van-swipe-item>
        <van-swipe-item> <img src="https://picsum.photos/430/130" alt=""></van-swipe-item>
        <van-swipe-item> <img src="https://picsum.photos/430/130" alt=""></van-swipe-item>
      </van-swipe>
      <van-grid :column-num="3">
        <van-grid-item to="/study/detail/1">
          <van-image round src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
          <p class="txt">环保基础知识</p>
        </van-grid-item> <van-grid-item to="/study/detail/2">
          <van-image round src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
          <p class="txt">法律解读</p>
        </van-grid-item> <van-grid-item to="/study/detail/3">
          <van-image round src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
          <p class="txt">志愿服务</p>
        </van-grid-item> <van-grid-item to="/study/detail/4">
          <van-image round src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
          <p class="txt">视频</p>
        </van-grid-item> <van-grid-item to="/study/detail/5">
          <van-image round src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
          <p class="txt">文献</p>
        </van-grid-item> <van-grid-item to="/study/detail/6">
          <van-image round src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
          <p class="txt">论坛</p>
        </van-grid-item>
      </van-grid>
      <van-cell-group>
        <van-divider content-position="left">热门视频</van-divider>
        <!-- 视频 -->
        <video ref="videoRef" class="video" controls @ended="toggleVideo">
          <source src="https://video.wixstatic.com/video/93db6d_3e2c895f6f2d48379f3cd0e93931d485/1080p/mp4/file.mp4"
            type="video/mp4" />
          您的浏览器不支持 video 标签。
        </video>
        <video ref="videoRef" class="video" controls @ended="toggleVideo">
          <source src="https://video.wixstatic.com/video/93db6d_3e2c895f6f2d48379f3cd0e93931d485/1080p/mp4/file.mp4"
            type="video/mp4" />
          您的浏览器不支持 video 标签。
        </video>

      </van-cell-group>


      <van-divider content-position="left">热门精选</van-divider>

      <div v-for="item in trendingCases" :key="item.id">
        <van-cell :title="item.username">
          <template #icon>
            <img :src="item.user_avatar" class="head" alt="">
          </template>
          <template #right-icon>
            <van-button size="mini">关注</van-button>
          </template>
        </van-cell>

        <van-cell :title="item.description" />

        <!-- 单图展示（使用 before_image） -->
        <div class="single-image">
          <img :src="item.before_image" class="png" alt="效果展示">
        </div>

        <div class="btnline btn-group">
          <a class="btn"><van-icon name="share-o" />{{ item.share_count }}</a>
          <a class="btn"><van-icon name="chat-o" />{{ item.collect_count }}</a>
          <a class="btn"><van-icon name="good-job-o" />{{ item.like_count }}</a>
        </div>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script setup>
import Swipe from "../components/Swipe.vue"
import Search from "../components/Search.vue"
import Studygrid from "../components/Studygrid.vue"
import fullimg from "../components/fullimg.vue"

import { ref, onMounted } from 'vue';
import axios from 'axios';

// 新增热门案例数据
const trendingCases = ref([]);

// 获取热门案例
const fetchTrending = async () => {
  try {
    const response = await axios.get('http://localhost:8080/api/comparison-cases/category/trending');
    trendingCases.value = response.data;
  } catch (error) {
    console.error('获取热门数据失败:', error);
  }
};

onMounted(() => {
  fetchTrending();
});
</script>

<style scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.morelist .txt {
  text-align: center;
  line-height: 30px;
  padding: 10px 0;
}

.my-swipe {
  margin-top: 50px;
}

.my-swipe img {
  display: block;
  width: 100vw;
}

.txt {
  line-height: 40px;
  font-size: 14px;
}

.video {
  width: 100vw;
  height: 200px;
}

.head {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.png {
  width: 100vw;
  height: 140px;
}

.btnline.btn-group {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

.btnline.btn-group .btn {
  width: 33%;
  flex-grow: 1;
  text-align: center;
  line-height: 40px;
}

.btnline.btn-group .btn i {
  display: inline-block;
  margin-right: 10px;
}

.conlist {
  padding-bottom: 120px;
}

.single-image {
  position: relative;
  padding: 0 16px;
  margin-bottom: 12px;
}

.png {
  width: 100%;
  height: 200px;
  /* 适当增加高度 */
  object-fit: cover;
  border-radius: 8px;
}
</style>